<link href="__CDN__/assets/css/app_new.css?c=12" rel="stylesheet" />
<style>
  /* 默认橙色按钮 */
  .pay-for-phone .verificationCodeBtn {
    background: linear-gradient(228deg, #ff9c1e 0, #ff7300 100%);
  }
  /* 倒计时背景色 */
  .pay-for-phone .verificationCodeBtn.counting-bg {
    background: linear-gradient(228deg, #cfcbc6 0, #969290 100%);
  }
  .pay-for-phone > div div:nth-child(2) input {
    height: 1.26rem;
    line-height: 1.26rem;
    box-sizing: border-box;
    padding: 0;
  }
  .pay-for-phone > div div:nth-child(3) {
    margin-top: 0.1rem;
    padding: 0;
  }
  .store_info span.f24 {
    font-size: 0.24rem !important;
  }
  .ellipsis-one {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .Box {
    height: 1.2rem;
    line-height: 1.2rem;
    border-bottom: 1px solid #f3f3f3;
  }
  .Box input {
    padding: 0;
    height: auto !important;
    line-height: normal !important;
  }
  .w_100 {
    width: 100%;
    overflow: hidden;
  }
  /* #gradualBg1.grey {
    background: #d5d5d5;
  } */
  .skeleton {
    height: 0.88rem;
    width: 100%;
  }
  .pay-f-1 {
    margin-top: 0;
    height: 5.14rem;
    margin: 0;
    padding: 0.3rem 0.3rem 0;
    box-sizing: border-box;
    border-radius: 0;
    margin-bottom: 1rem;
  }
  .pay-f-1 > div:nth-child(1) {
    padding: 0.4rem;
    margin: 0;
    width: 100%;
    min-height: 5.8rem;
    box-sizing: border-box;
  }
  .store-panel {
    padding: 0.15rem;
    box-sizing: border-box;
  }
  .pay-logo {
    margin: 0;
    padding: 0.32rem 0;
    box-sizing: border-box;
  }
</style>
<div class="all-container pay-bg">
  <div class="login-register-header">
    <div class="back-btn">
      <a href="javascript:history.go(-1)"
        ><img src="__CDN__/map/images/return@2x.png" alt="返回"
      /></a>
    </div>
    <div>
      <div class="invite-header-c d-flex">
        <span class="add-agent-title">向商家付款</span>
      </div>
    </div>
  </div>
  <div class="skeleton"></div>
  <div class="pay-f-1">
    <div>
      <div class="d-flex">
        <div><img src="__CDN__/map/images/pay02_03.png" alt="商店" /></div>
        <div class="store_info w_100">
          <span>{$shop_name}</span>
          <p class="f24 ellipsis-one">{$desc}</p>
        </div>
      </div>
      <div class="d-flex">
        <span>￥</span
        ><input
          readonly
          value=""
          name="price"
          id="pay"
          placeholder="消费金额"
          type="text"
        />
      </div>
      <div class="d-flex pay-div" id="preferential" {$preferential_style}>
        <span>首单优惠</span>
        <span class="all-color"
          >-￥<span id="preferential1">{$preferential}</span></span
        >
      </div>
      <div class="d-flex pay-div" id="money">
        <span>余额</span>
        <div class="d-flex">
          <span class="all-color">-￥<span id="money1">{$money}</span></span
          ><input id="ischange" type="checkbox" name="video" value="1" />
        </div>
      </div>
      <div class="d-flex">
        <div>
          <span>小计:</span>
          <span class="all-color">￥<span id="total"></span></span>
        </div>
      </div>
    </div>
  </div>
  <div class="pay-logo">
    <img src="__CDN__/map/images/pay02_07.png" alt="商家图标" />
    <span>欢迎使用芝麻街商户</span>
  </div>
  <table class="pay-key">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td class="pay-del">
        <img src="__CDN__/map/images/pay02_11.png" alt="删除" />
      </td>
    </tr>
    <tr>
      <td class="pat-td-4">4</td>
      <td>5</td>
      <td>6</td>
      <td class="all-pay-o" id="gradualBg1" rowspan="3">
        <p>确认</p>
        <p>支付</p>
      </td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td colspan="2">0</td>
      <td>.</td>
    </tr>
  </table>

  {if $status eq 1}
  <div class="pay-for-phone">
    <div>
      <p>绑定手机</p>
      <div class="Box">
        <input
          type="text"
          autocomplete="off"
          name="mobile"
          placeholder="请输入手机号码"
        />
      </div>
      <div class="Box">
        <input
          type="text"
          autocomplete="off"
          name="code"
          style="width: 55%"
          placeholder="请输入您的验证码"
        />
        <button
          class="verificationCodeBtn counting-bg"
          style="width: 2.5rem;max-width:2.5rem;"
        >
          获取验证码
        </button>
      </div>
      <input type="hidden" name="parent_id" value="{$parent_id}" />
      <button id="BoxInput">完成</button>
      <span>注册会员, 最高可获得10元无门槛现金红包。</span>
    </div>
  </div>
  <input type="hidden" name="parent_id" value="{$parent_id}" />

  {/if}
  <form action="" method="post">
    <input name="preferential" type="hidden" value="{$preferential}" />
    <input type="hidden" name="money" value="{$money}" />
    <input type="hidden" name="money1" value="0" />
    <input type="hidden" name="to_price" />
    <input type="hidden" name="shop_id" value="{$shop_id}" />
    <input type="hidden" name="price1" id="pay1" />
    <input type="hidden" name="parent_id" value="{$parent_id}" />
  </form>
</div>
<script type="text/javascript" src="__CDN__/assets/js/jquery.form.js"></script>
<style>
  .pay-for-phone > div div:nth-child(2) input {
    font-size: 0.32rem;
    border: none;
  }
  .pay-key td {
    font-weight: 300;
  }
</style>
<script>

  var is_post=0;
  var dom = document.querySelectorAll('.Box input');
  $(document).attr('title', '向商家付款');
  if ($('#preferential').is(':hidden')) {
    // $('.pay-logo').css({ 'margin-top': '0.28rem' });
    // $('.pay-key').css({ 'margin-bottom': '1.16rem' });
  }
  var h = $(document).height();
  $('.all-container').height(h);

  $(document).on('input', '[name="mobile"]', function() {
    //console.log(123);
    if ($(this).val()) {
      $('.verificationCodeBtn')
        .removeClass('counting-bg')
        .attr('disabled', false);
    } else {
      $('.verificationCodeBtn')
        .addClass('counting-bg')
        .attr('disabled', true);
    }
  });

  $(function() {
    $('#gradualBg1').on('click', function() {

      if(is_post==1){
        alert('正在提交订单中，请稍后...');
        return false;
      }
      is_post=1;
      $('form').ajaxSubmit(function(e) {
        is_post=0;
        if (e.code == 1) {
          alert(e.msg);
          window.location.href = "{:url('user/sucess')}";
          // javascript:history.go(-1)
        } else {
          alert(e.msg);
        }
      });
    });
    var bol = false;
    $(document).on('input', '.Box input', function() {
      inputchange();
      var obj = $('#BoxInput');
      if (!bol) {
        obj.attr('disabled', false);
        obj.addClass('gradualBg');
      } else {
        obj.attr('disabled', true);
        obj.removeClass('gradualBg');
      }
    });
    function inputchange() {
      $('.Box').each(function() {
        var that = $(this);
        var val = that.find('input').val();
        if (val.length <= 0) {
          bol = true;
        } else {
          bol = false;
        }
      });
    }
    $(document).on('click', '#BoxInput', function() {
      var mobile = $("input[name='mobile']").val();
      var captcha = $("input[name='code']").val();
      var parent_id = $("input[name='parent_id']").val();

      var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (!myreg.test(mobile)) {
        alert('请填写正确的手机号码');
        return false;
      }
      if (captcha == null || captcha == undefined || captcha == '') {
        alert('请输入验证码');
        return false;
      }

      var password = mobile.substr(4, 7);
      password = 'a' + password;
      $.ajax({
        type: 'POST',
        url: '{$register_url}',
        dataType: 'json',
        data: {
          mobile: mobile,
          captcha: captcha,
          password: password,
          parent_id: parent_id
        },
        success: function(data) {
          if (data.code == 9) {
            if (data.msg == '注册成功') {
              alert(data.msg + ':你的初始密码是:' + password);
            } else {
              alert(data.msg);
            }

            $('.pay-for-phone').css('display', 'none');
            $("input[name='money']").val(data.money);
            $("input[name='preferential']").val(data.preferential);
            $('#preferential1').html(data.preferential);
            $('#money1').html(data.money);
            history.go(0);
            
          } else {
            alert(data.msg);
          }
        },
        error: function(jqXHR) {
          console.log('Error: ' + jqXHR.status);
        }
      });
    });

    var countdown = 60;
    $('.verificationCodeBtn').on('click', function() {
      var obj = $(this);
      var mobile = $("input[name='mobile']").val();
      if (mobile != '') {
        if (
          !/^((\d{3}-\d{8}|\d{4}-\d{7,8})|(1[3|5|7|8][0-9]{9}))$/.test(mobile)
        ) {
          alert('手机号填写的格式不对，请正确填写');
          return false;
        } else {
          $.ajax({
            type: 'GET',
            url: '{$http_url}' + '/api/sms/send?event=rev&mobile=' + mobile,
            dataType: 'json',
            success: function(data) {
              if (data.code == 0) {
                alert(data.msg);
              } else {
                alert(data.msg);
                settime(obj);
                // $("input[name='code']").val(data.data);
                // obj.attr('disabled',true);
              }
              // settime(obj)
            },
            error: function(jqXHR) {
              console.log('Error: ' + jqXHR.status);
            }
          });
        }
      } else if (mobile == '') {
        alert('手机号不能为空');
        return false;
      }
    });
    function settime(obj) {
      //发送验证码倒计时
      if (countdown == 0) {
        obj.attr('disabled', false);
        obj.removeClass('counting-bg');
        obj.text('获取验证码');
        countdown = 60;
        return;
      } else {
        obj.attr('disabled', true);
        obj.addClass('counting-bg');
        obj.text('重新发送(' + countdown + ')');
        countdown--;
      }
      setTimeout(function() {
        settime(obj);
      }, 1000);
    }
    // -----------------------计算器逻辑-------------------------------
    //钱包的钱不许动
    const $wallet = Number($('#money1').html());
    var $pay = $('#pay'); // 输入的支付金额
    var $total = $('#total'); // 总计
    var $discount = $('#preferential1'); // 首单优惠
    var should_pay = ''; // 应付款 type string
    var result = 0; // 结算 type number
    // --------------------------------------------------
    //键盘事件 1.优惠 2.余额
    $(document).on('click', 'td', function(e) {
      var that = $(this),
        $td = $(this)[0];
      // let aa = $("#total").html()
      // if (Number(aa) != 0) {
      //   $("#gradualBg1").removeClass("grey")
      // } else {
      //   $("#gradualBg1").addClass("grey")
      // }
      // 删除按钮
      if ($td.className === 'pay-del') {
        should_pay = $pay.val().substring(0, $pay.val().length - 1);
        // $("#ischange")[0].checked = false;
        // 确认支付
      } else if ($td.className === 'all-pay-o') {
        return;
        // 其他按钮，小数点限制输入1个，
      } else {
        if (that.context.innerHTML === '.') {
          let regPoint = /\./g;
          if ($pay.val().match(regPoint) !== null) {
            return false;
          }
        }
        // 先判断是否有小数点
        if ($pay.val().indexOf('.') !== -1) {
          let pointPosition = $pay.val().indexOf('.') + 1;
          // 查询小数点后方字符串长度 不允许大于2
          if ($pay.val().substring(pointPosition).length > 1) {
            return false;
          }
        }
        should_pay = should_pay + that.context.innerHTML;
      }
      // 这里都是字符串，不应该执行数值运算，如果需要数值运算，自己重新拿，不要去动全局变量
      // 应付款
      $pay.val(should_pay);
      // ---------------------以上是纯输入---------------------------------
      // 判断是否勾选余额支付
      if ($('#ischange')[0].checked) {
        // 总计 = 应付款 - 余额
        result = Number($(pay).val()) - $wallet;
      } else {
        result = Number($('#pay').val());
      }
      // ---------------------判断是否有值再判断是否给首单优惠---------------
      if (Number($discount.html()) > 0) {
        result = result - Number($discount.html());
      }
      // 对负数做处理
      if (Number(result) < 0) {
        $total.html(0);
        $("input[name='to_price']").val(0); //最终付款值
      } else {
        $total.html(Number(result).toFixed(2));
        $("input[name='to_price']").val(result); //最终付款值
      }
      // 写入php表单
      $('#pay1').val($pay.val()); //输入的付款值
    });
    // --------------------是否使用余额 对result有影响-----------
    $('#ischange').change(function(e) {
      // 如果勾选
      if (e.currentTarget.checked === true) {
        // 总计result = 应付款 - 余额
        result = Number($('#pay').val()) - $wallet;
        // 选中时设置到php表单
        $("input[name='money1']").val($wallet);
      } else {
        // 不适用余额 应付款不变
        result = Number($('#pay').val());
        // 选中时设置到php表单
        $("input[name='money1']").val(0);
      }
      // 对负数做处理
      if (Number(result) < 0) {
        $total.html(0);
      } else {
        $total.html(Number(result).toFixed(2));
      }
      // 写入php表单
      $("input[name='to_price']").val($total.html()); //最终付款值
    });
    // ---------------------------------------------------------
    //禁用手机自带键盘的弹出
    $('#pay').focus(function() {
      document.activeElement.blur();
    });
  });
</script>
